/**
 * 监管风险
 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import DataBinder from '@icedesign/data-binder';
import { Table, Grid } from "@icedesign/base";
import './SuperviseRisk.scss';
import DeductTable from './components/DeductTable';
import OtherDeductTable from './components/OtherDeductTable';
import {getSVTop5BarOption, getSVTypeBarOption} from '../../echarts-figures';
import initChart from './initChart';

const { Row, Col } = Grid;

const TitleBox = (props) => {
  return (
    <div className="title-box">
      <div className="tl supervise-title">
        <div className="kk"></div>
        {props.title}
        </div>
    </div>
  );
}


@DataBinder({
  // 本年度评估期内信披减分
  deductList: {
    url:`${global.constants.GOLDEYEGETHOST}cattle/compliance_score_detail`,
    type: 'get',
    // params: {
    //   secu_code: GetUrlParam("secu_code"),
    // },
    defaultBindingData: []
  },
  // 本年度其他违规项
  otherList: {
    url:`${global.constants.GOLDEYEGETHOST}cattle/current_year_other_violation`,
    type: 'get',
    defaultBindingData: {
      data_list: []
    }
  },
  // 行业其他公司最新监管违规项
  companiesDeductList: {
    url:`${global.constants.GOLDEYEGETHOST}cattle/compliance_score_detail`,
    type: 'get',
    defaultBindingData: []
  },
  // 行业监管处罚类型分布
  punishTypes: {
    url:`${global.constants.GOLDEYEGETHOST}cattle/industry_supervision_punish_type`,
    type: 'get',
    defaultBindingData: []
  },
  // 行业监管处罚TOP5(本年度)
  punishTop5: {
    url:`${global.constants.GOLDEYEGETHOST}cattle/industry_supervision_punish`,
    type: 'get',
    defaultBindingData: []
  },
})
export default class SuperviseRisk extends Component {
  static displayName = 'SuperviseRisk';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      Top5Msg: '',
      TypeMsg: ''
    };
  }
  componentDidMount() {
    // 本年度评估期内信披减分
    this.props.updateBindingData('deductList',{
      params: {
        secu_code: GetUrlParam("secu_code"),
      }
    });
    // 本年度其他违规项
    this.props.updateBindingData('otherList',{
      params: {
        secu_code: GetUrlParam("secu_code"),
      }
    });
    // 本年度评估期内信披减分
    this.props.updateBindingData('companiesDeductList',{
      params: {
        secu_code: GetUrlParam("secu_code"),
        api_type:'industry'
      }
    });

    // 行业监管处罚TOP5
    this.props.updateBindingData('punishTop5',{
      params: {
        secu_code: GetUrlParam("secu_code"),
        api_type:'industry'
      }
    }, (res) => {
      if(res && res.flag && res.data){
        const {data} = res;
        let topOptions = getSVTop5BarOption(data.x,data.y);
        initChart(topOptions, 'superviseTop5Bar');
      } else {
        this.setState({
          Top5Msg: res && res.msg|| '暂无数据'
        });
      }
    });

    // 行业监管处罚类型分布
    this.props.updateBindingData('punishTypes',{
      params: {
        secu_code: GetUrlParam("secu_code"),
        api_type:'industry'
      }
    }, (res) => {
      if(res && res.flag && res.data){
        const {data} = res;
        let typeOptions = getSVTypeBarOption(data.legends, data.x, data.y);
        initChart(typeOptions, 'superviseTypeBar');
      } else {
        this.setState({
          TypeMsg: res && res.msg|| '暂无数据'
        })
      }
    });
  }

  render () {
    let {deductList, companiesDeductList, otherList} = this.props.bindingData;
    return (
      <div className="supervise-wrapper">
        <Row>
          <Col span="15" style={{paddingRight: '16px'}}>
            <IceContainer style={{ marginBottom: '15px', borderRadius: '0', padding: '0' }}>
              <TitleBox title="本年度评估期内信披减分"/>
              <DeductTable list={Array.from(deductList)} isLoading={deductList.__loading}/>
            </IceContainer>
            <IceContainer style={{ marginBottom: '15px', borderRadius: '0', padding: '0' }}>
              <TitleBox title="本年度其他违规项"/>
              <OtherDeductTable list={otherList.data_list} isLoading={otherList.__loading}/>
            </IceContainer>
            <IceContainer style={{ marginBottom: '15px', borderRadius: '0', padding: '0' }}>
              <TitleBox title="行业其他公司最新监管违规项"/>
              <DeductTable list={Array.from(companiesDeductList)} isLoading={companiesDeductList.__loading}/>
            </IceContainer>
          </Col>
          <Col span="9">
            <IceContainer style={{ marginBottom: '15px', borderRadius: '0', padding: '0' }}>
              <TitleBox title="行业监管处罚类型分布"/>
              <div id="superviseTypeBar" className="supervise-type-bar">
                <p style={{textAlign:'center',lineHeight:'230px',fontSize:'20px'}}>{this.state.TypeMsg}</p>
              </div>
            </IceContainer>
            <IceContainer style={{ marginBottom: '15px', borderRadius: '0', padding: '0' }}>
              <TitleBox title="行业监管处罚TOP5(本年度)"/>
              <div id="superviseTop5Bar" className="supervise-top5-bar">
                <p style={{textAlign:'center',lineHeight:'230px',fontSize:'20px'}}>{this.state.Top5Msg}</p>
              </div>
            </IceContainer>
          </Col>
        </Row>
      </div>
    );
  }
}
